<script setup>
import { ref, onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const userInfo = ref(null)
const activeTab = ref('orders')

// 模拟订单数据
const orders = ref([
  {
    id: '20240101001',
    status: '待付款',
    createTime: '2024-01-01 10:30:00',
    totalAmount: 299,
    items: [
      {
        id: 1,
        name: '时尚连衣裙',
        price: 199,
        quantity: 1,
        image: 'https://img.alicdn.com/imgextra/i1/O1CN01e0Z4fO1yG7g7Q1Zfo_!!6000000006889-0-picassoopen.jpg'
      },
      {
        id: 2,
        name: '女士手提包',
        price: 100,
        quantity: 1,
        image: 'https://img.alicdn.com/imgextra/i2/O1CN01z8X2ZQ1vJ1z6Z8X2Z_!!6000000006227-0-picassoopen.jpg'
      }
    ]
  },
  {
    id: '20240102002',
    status: '已发货',
    createTime: '2024-01-02 15:45:00',
    totalAmount: 799,
    items: [
      {
        id: 3,
        name: '智能手表',
        price: 799,
        quantity: 1,
        image: 'https://img.alicdn.com/imgextra/i1/O1CN01X0FzNQ27YtU4K2bVQ_!!6000000007990-0-picassoopen.jpg'
      }
    ]
  },
  {
    id: '20240103003',
    status: '已完成',
    createTime: '2024-01-03 09:15:00',
    totalAmount: 399,
    items: [
      {
        id: 4,
        name: '护肤套装',
        price: 399,
        quantity: 1,
        image: 'https://img.alicdn.com/imgextra/i3/O1CN013vR93t1eZ2wY7Y6qL_!!6000000006001-0-picassoopen.jpg'
      }
    ]
  }
])

// 收货地址数据
const addresses = ref([
  {
    id: 1,
    name: '张三',
    phone: '138****1234',
    province: '北京市',
    city: '北京市',
    district: '朝阳区',
    detail: '三里屯街道123号',
    isDefault: true
  },
  {
    id: 2,
    name: '张三',
    phone: '139****5678',
    province: '上海市',
    city: '上海市',
    district: '浦东新区',
    detail: '陆家嘴金融中心456号',
    isDefault: false
  }
])

// 账户设置表单数据
const settingsForm = reactive({
  username: '',
  email: '',
  phone: '',
  avatar: ''
})

// 验证登录状态
const checkLoginStatus = () => {
  const user = localStorage.getItem('user')
  if (user) {
    userInfo.value = JSON.parse(user)
    // 初始化设置表单数据
    settingsForm.username = userInfo.value.username || ''
    settingsForm.email = userInfo.value.email || ''
    settingsForm.phone = userInfo.value.phone || ''
    settingsForm.avatar = userInfo.value.avatar || 'https://via.placeholder.com/100'
  } else {
    alert('请先登录')
    router.push('/login')
  }
}

// 切换标签
const switchTab = (tab) => {
  activeTab.value = tab
}

// 保存账户设置
const saveSettings = () => {
  // 更新用户信息
  if (userInfo.value) {
    userInfo.value = {
      ...userInfo.value,
      username: settingsForm.username,
      email: settingsForm.email,
      phone: settingsForm.phone,
      avatar: settingsForm.avatar
    }
    // 保存到localStorage
    localStorage.setItem('user', JSON.stringify(userInfo.value))
    alert('设置保存成功')
  }
}

// 删除订单
const deleteOrder = (orderId) => {
  if (confirm('确定要删除这个订单吗？')) {
    const index = orders.value.findIndex(order => order.id === orderId)
    if (index > -1) {
      orders.value.splice(index, 1)
    }
  }
}

// 设置默认地址
const setDefaultAddress = (addressId) => {
  addresses.value.forEach(addr => {
    addr.isDefault = addr.id === addressId
  })
}

onMounted(() => {
  checkLoginStatus()
})
</script>

<template>
  <div class="profile-container">
    <div class="container">
      <!-- 个人信息头部 -->
      <div class="profile-header">
        <div class="avatar-section">
          <img :src="settingsForm.avatar" alt="用户头像" class="avatar" />
          <h2>{{ userInfo?.username || '用户' }}</h2>
          <p class="user-id">ID: {{ userInfo?.id || '000000' }}</p>
        </div>
        <div class="stats-section">
          <div class="stat-item">
            <span class="stat-number">{{ orders.length }}</span>
            <span class="stat-label">我的订单</span>
          </div>
          <div class="stat-item">
            <span class="stat-number">{{ addresses.length }}</span>
            <span class="stat-label">收货地址</span>
          </div>
          <div class="stat-item">
            <span class="stat-number">0</span>
            <span class="stat-label">优惠券</span>
          </div>
          <div class="stat-item">
            <span class="stat-number">0</span>
            <span class="stat-label">我的收藏</span>
          </div>
        </div>
      </div>

      <!-- 标签导航 -->
      <div class="profile-tabs">
        <div 
          v-for="tab in ['orders', 'addresses', 'settings']" 
          :key="tab"
          class="tab-item"
          :class="{ active: activeTab === tab }"
          @click="switchTab(tab)"
        >
          {{ tab === 'orders' ? '我的订单' : tab === 'addresses' ? '收货地址' : '账户设置' }}
        </div>
      </div>

      <!-- 内容区域 -->
      <div class="profile-content">
        <!-- 订单列表 -->
        <div v-if="activeTab === 'orders'" class="orders-section">
          <div v-if="orders.length > 0" class="orders-list">
            <div v-for="order in orders" :key="order.id" class="order-item">
              <div class="order-header">
                <span class="order-id">订单号: {{ order.id }}</span>
                <span class="order-time">{{ order.createTime }}</span>
                <span class="order-status" :class="order.status">{{ order.status }}</span>
              </div>
              <div class="order-items">
                <div v-for="item in order.items" :key="item.id" class="order-product">
                  <div class="product-image-container">
                    <img :src="item.image || getDefaultImage(item.category)" :alt="item.name" class="product-image" />
                    <div v-if="item.category" class="item-category-badge">
                      <span class="category-icon">{{ getCategoryIcon(item.category) }}</span>
                      {{ item.category }}
                    </div>
                  </div>
                  <div class="product-info">
                    <span class="product-name">{{ item.name }}</span>
                    <span class="product-price">¥{{ item.price }}</span>
                    <span class="product-quantity">x{{ item.quantity }}</span>
                  </div>
                </div>
              </div>
              <div class="order-footer">
                <span class="order-total">共{{ order.items.reduce((sum, item) => sum + item.quantity, 0) }}件商品 合计: ¥{{ order.totalAmount }}</span>
                <div class="order-actions">
                  <button v-if="order.status === '待付款'" class="action-btn pay-btn">立即付款</button>
                  <button v-if="order.status === '已发货'" class="action-btn confirm-btn">确认收货</button>
                  <button class="action-btn delete-btn" @click="deleteOrder(order.id)">删除订单</button>
                  <button class="action-btn view-btn">查看详情</button>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="empty-state">
            <p>暂无订单记录</p>
            <router-link to="/home" class="go-shopping">去购物</router-link>
          </div>
        </div>

        <!-- 收货地址 -->
        <div v-if="activeTab === 'addresses'" class="addresses-section">
          <button class="add-address-btn">添加新地址</button>
          <div class="addresses-list">
            <div v-for="address in addresses" :key="address.id" class="address-item" :class="{ 'default': address.isDefault }">
              <div class="address-header">
                <span class="recipient">{{ address.name }} {{ address.phone }}</span>
                <span v-if="address.isDefault" class="default-tag">默认</span>
              </div>
              <div class="address-detail">
                {{ address.province }}{{ address.city }}{{ address.district }}{{ address.detail }}
              </div>
              <div class="address-actions">
                <button class="action-btn edit-btn">编辑</button>
                <button v-if="!address.isDefault" class="action-btn set-default-btn" @click="setDefaultAddress(address.id)">设为默认</button>
                <button class="action-btn delete-btn">删除</button>
              </div>
            </div>
          </div>
        </div>

        <!-- 账户设置 -->
        <div v-if="activeTab === 'settings'" class="settings-section">
          <form @submit.prevent="saveSettings" class="settings-form">
            <div class="form-group">
              <label for="username">用户名</label>
              <input 
                type="text" 
                id="username" 
                v-model="settingsForm.username" 
                placeholder="请输入用户名"
                required
              />
            </div>
            
            <div class="form-group">
              <label for="email">邮箱</label>
              <input 
                type="email" 
                id="email" 
                v-model="settingsForm.email" 
                placeholder="请输入邮箱"
                required
              />
            </div>
            
            <div class="form-group">
              <label for="phone">手机号</label>
              <input 
                type="tel" 
                id="phone" 
                v-model="settingsForm.phone" 
                placeholder="请输入手机号"
                required
              />
            </div>
            
            <div class="form-group">
              <label for="avatar">头像URL</label>
              <input 
                type="text" 
                id="avatar" 
                v-model="settingsForm.avatar" 
                placeholder="请输入头像URL"
              />
            </div>
            
            <div class="form-actions">
              <button type="submit" class="save-btn">保存设置</button>
              <button type="button" class="cancel-btn">取消</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.profile-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20px 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 头部样式 */
.profile-header {
  background-color: #fff;
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 50px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #f0f0f0;
}

.avatar-section h2 {
  margin: 15px 0 5px;
  font-size: 20px;
  font-weight: 600;
}

.user-id {
  color: #999;
  font-size: 14px;
}

.stats-section {
  display: flex;
  gap: 60px;
  flex: 1;
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 24px;
  font-weight: 600;
  color: #ff6700;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

/* 标签导航样式 */
.profile-tabs {
  background-color: #fff;
  border-radius: 8px;
  padding: 0 30px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tab-item {
  display: inline-block;
  padding: 20px 30px;
  font-size: 16px;
  color: #666;
  cursor: pointer;
  position: relative;
  transition: color 0.3s;
}

.tab-item:hover {
  color: #ff6700;
}

.tab-item.active {
  color: #ff6700;
  font-weight: 500;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #ff6700;
}

/* 内容区域样式 */
.profile-content {
  background-color: #fff;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 订单列表样式 */
.order-item {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.order-id {
  font-weight: 500;
  color: #333;
}

.order-time {
  color: #999;
  font-size: 14px;
}

.order-status {
  font-size: 14px;
  padding: 4px 12px;
  border-radius: 4px;
  background-color: #f5f5f5;
}

.order-status.待付款 {
  color: #ff6700;
  background-color: #fff2e8;
}

.order-status.已发货 {
  color: #1989fa;
  background-color: #e6f4ff;
}

.order-status.已完成 {
  color: #52c41a;
  background-color: #f6ffed;
}

.order-items {
  margin-bottom: 15px;
}

.order-product {
  display: flex;
  gap: 15px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.order-product:last-child {
  border-bottom: none;
}

.product-image-container {
  width: 80px;
  height: 80px;
  background-color: #f5f5f5;
  margin-right: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-name {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}

.product-price {
  color: #ff6700;
  font-weight: 500;
}

.product-quantity {
  color: #999;
  font-size: 14px;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
}

.order-total {
  color: #666;
  font-size: 14px;
}

.order-actions {
  display: flex;
  gap: 10px;
}

/* 按钮样式 */
.action-btn {
  padding: 6px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  color: #666;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.action-btn:hover {
  border-color: #ff6700;
  color: #ff6700;
}

.pay-btn,
.confirm-btn {
  background-color: #ff6700;
  border-color: #ff6700;
  color: #fff;
}

.pay-btn:hover,
.confirm-btn:hover {
  background-color: #e65c00;
  border-color: #e65c00;
  color: #fff;
}

.delete-btn:hover {
  border-color: #ff4d4f;
  color: #ff4d4f;
}

/* 空状态样式 */
.empty-state {
  text-align: center;
  padding: 60px 0;
}

.empty-state p {
  color: #999;
  font-size: 16px;
  margin-bottom: 20px;
}

.go-shopping {
  display: inline-block;
  padding: 10px 30px;
  background-color: #ff6700;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.3s;
}

.go-shopping:hover {
  background-color: #e65c00;
}

/* 地址列表样式 */
.add-address-btn {
  width: 100%;
  padding: 15px;
  border: 1px dashed #ddd;
  border-radius: 4px;
  background-color: #fafafa;
  color: #666;
  cursor: pointer;
  margin-bottom: 20px;
  font-size: 16px;
  transition: all 0.3s;
}

.add-address-btn:hover {
  border-color: #ff6700;
  color: #ff6700;
  background-color: #fff;
}

.address-item {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  position: relative;
}

.address-item.default {
  border-color: #ff6700;
}

.address-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
}

.recipient {
  font-weight: 500;
  color: #333;
}

.default-tag {
  font-size: 12px;
  color: #ff6700;
  padding: 2px 8px;
  border: 1px solid #ff6700;
  border-radius: 4px;
}

.address-detail {
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
}

.address-actions {
  display: flex;
  gap: 10px;
}

/* 订单中商品的类别标签样式 */
.item-category-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  background-color: rgba(255, 255, 255, 0.9);
  color: #666;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 10px;
  z-index: 1;
  opacity: 0;
  transform: translateY(-8px);
  transition: all 0.3s ease;
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  gap: 2px;
}

.order-product:hover .item-category-badge {
  opacity: 1;
  transform: translateY(0);
  background-color: white;
  color: #ff0036;
}

.category-icon {
  font-size: 12px;
}

/* 设置表单样式 */
.settings-form {
  max-width: 600px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #333;
  font-weight: 500;
}

.form-group input {
  width: 100%;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.form-group input:focus {
  outline: none;
  border-color: #ff6700;
}

.form-actions {
  display: flex;
  gap: 20px;
  margin-top: 30px;
}

.save-btn {
  padding: 12px 40px;
  background-color: #ff6700;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.save-btn:hover {
  background-color: #e65c00;
}

.cancel-btn {
  padding: 12px 40px;
  background-color: #fff;
  color: #666;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.cancel-btn:hover {
  border-color: #ff6700;
  color: #ff6700;
}
</style>